<!doctype html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <title>Tabbar | Onsen UI</title>
    <link rel="stylesheet" href="../styles/app.css"/>
    <link rel="stylesheet" href="../../../../build/css/onsenui.css">
    <link rel="stylesheet" href="../../../../build/css/onsen-css-components.css">

    <script src="../../../../build/js/onsenui.js"></script>
    <script src="../../../../node_modules/angular/angular.js"></script>
    <script src="../../../../build/js/angular-onsenui.js"></script>
    <script src="../app.js"></script>

    <script>
      ons.ready(function() {
        tabbar.on('prechange', function(event) {
          /*if (!confirm('change?')) {
            event.cancel();
          }*/
        });

        tabbar.on('postchange', function() {
          console.log('postchange');
        });
      });

      angular.module('myApp')
        .controller('MyController', function($scope, $timeout) {
          $scope.comments = 13;

          var randomTime = function() {
            return parseInt(3000 * Math.random()) + 500;
          };

          var increaseComments = function() {
            $scope.comments += 1;
            $timeout(increaseComments, randomTime());
          };

          $timeout(increaseComments, randomTime());

        });

    </script>

  </head>

  <body>

    <ons-page>
      <ons-tabbar ng-controller="MyController" var="tabbar" swipeable>
        <ons-tab page="page1.html" active label="Home"></ons-tab>
        <ons-tab
          icon="ion-chatbox-working"
          ng-click="comments = 0"
          label="Comments"
          ng-attr-badge="{{ comments ? comments : null }}"
          page="page2.html"></ons-tab>
        <ons-tab
          icon="ion-ios-cog"
          label="Settings"
          page="page3.html"></ons-tab>
      </ons-tabbar>
    </ons-page>

    <script type="text/ons-template" id="page3.html">
      <ons-page>
        <ons-toolbar>
          <div class="center">Page3</div>
        </ons-toolbar>
      </ons-page>
    </script>

  </body>
</html>
